import { SettingOutlined } from '@ant-design/icons';
import {  Input, Card, Space,Select, Button,Form,message } from 'antd';
import { useState,useEffect } from 'react'
import { setOrderTime,getOrderSet } from '../../../api/OrderApi'
import './css/Orderset.css'
const { Option } = Select;
export default function OrderSet() {
	const [form] = Form.useForm();
	const [orderSet,setOrderSet]=useState<any>()
	// 订单设置状态
	const [orderSet1,setOrderSet1]=useState<number>(31)
	const [orderSet2,setOrderSet2]=useState<number>(12)
	const [orderSet3,setOrderSet3]=useState<number>(7)
	const [orderSet4,setOrderSet4]=useState<number>(7)
	const [orderSet5,setOrderSet5]=useState<number>(10)
	const [orderSet6,setOrderSet6]=useState<number>(2)

	// useEffect(()=>{
	// 	getOrderSet().then(res=>{
	// 		// setOrderSet(res.data[0])
	// 		// console.log('res',res.data[0]);
	// 		setOrderSet1(res.data[0].automaticClose)
	// 		setOrderSet2(res.data[0].automaticComment)
	// 		setOrderSet3(res.data[0].automaticAndConfirmation)
	// 		setOrderSet4(res.data[0].automaticOk)
	// 		setOrderSet5(res.data[0].closeTime)
	// 		setOrderSet6(res.data[0].noRemarksAutomaticOk)
	// 	}).catch(err=>{
	// 		console.log('err',err);
			
	// 	})
	// },[orderSet1,orderSet2,orderSet3,orderSet4,orderSet5,orderSet6])


	useEffect(()=>{
		getInit()
	},[])

	// 获取初始值
	const getInit=()=>{
		getOrderSet().then(res=>{
			// setOrderSet(res.data[0])
			// console.log('res',res.data[0]);
			setOrderSet1(res.data[0].automaticClose)
			setOrderSet2(res.data[0].automaticComment)
			setOrderSet3(res.data[0].automaticSet)
			setOrderSet4(res.data[0].automaticOk)
			setOrderSet5(res.data[0].closeTime)
			setOrderSet6(res.data[0].noRemarksAutomaticOk)
		}).catch(err=>{
			console.log('err',err);
			
		})
	}

	// let {automaticClose } =orderSet
	
	// 点击提交
	const submitHandle=()=>{
		console.log('提交');
		console.log(orderSet1,orderSet2,orderSet3,orderSet4,orderSet5,orderSet6);	
		// message.success('订单设置成功')
		setOrderTime({
			automaticClose:orderSet1,
			automaticComment:orderSet2,
			automaticSet:orderSet3,
			automaticOk:orderSet4,
			closeTime:orderSet5,
			noRemarksAutomaticOk:orderSet6
		}).then(res=>{
			console.log('成功的res',res);	
			getInit()
			message.success('订单设置成功')
		}).catch(err=>{
			console.log('订单设置err',err);
			message.error('服务器错误了')
		})
	}

	// 输入框内容变化时的回调
	const changeHandle1=(event:any):void=>{
		console.log('event.target.value',event.target.value);	
		setOrderSet1(Number(event.target.value))
	}
	const changeHandle2=(event:any):void=>{
		setOrderSet2(Number(event.target.value))
	}
	const changeHandle3=(event:any):void=>{
		console.log('event.target.value',event.target.value);	
		setOrderSet3(Number(event.target.value))
	}
	const changeHandle4=(event:any):void=>{
		setOrderSet4(Number(event.target.value))
	}
	const changeHandle5=(event:any):void=>{
		setOrderSet5(Number(event.target.value))
	}
	const changeHandle6=(event:any):void=>{
		setOrderSet6(Number(event.target.value))
	}


	return (
		// 订单设置
		<div className="order_set">
			<p className='head'>订单设置</p>
			<Card title="订单设置" type="inner" className='orderset_content'>
				<div className="content_box">
					<Space className='space'>
						<span> <span className='icon'>*</span> 正常订单超过</span><Input className='input' addonAfter="分"  value={orderSet1}  onChange={()=>changeHandle1(event)}/><span>未付款，订单自动关闭</span>
					</Space>
					<Space className='space'>
						<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className='icon'>*</span>付款超过</span><Input className='input' addonAfter="小时" value={orderSet2} onChange={()=>changeHandle2(event)}/><span>未确认订单，订单自动确认</span>
					</Space>
					<Space className='space'>
						<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className='icon'>*</span>发货超过</span><Input className='input' addonAfter="天" value={orderSet3} onChange={()=>changeHandle3(event)}/><span>未确认收货，订单自动完成</span>
					</Space>
					<Space className='space'>
						<span><span className='icon'>*</span>订单完成超过</span><Input className='input' addonAfter="天" value={orderSet4} onChange={()=>changeHandle4(event)}/><span>自动关闭，不能申请售后</span>
					</Space>
					<Space className='space'>
						<span><span className='icon'>*</span>订单完成超过</span><Input className='input' addonAfter="天" value={orderSet5} onChange={()=>changeHandle5(event)}/><span>自动五星好评</span>
					</Space>
					<Space className='space'>
						<span><span className='icon'>*</span>无备注订单超过</span><Input className='input' addonAfter="小时" value={orderSet6} onChange={()=>changeHandle6(event)}/><span>自动确认</span>
					</Space>
				</div>
				{/* 提交按钮 */}
				<div className="submit_btn">
				   <Button type='primary' className='submit' onClick={submitHandle}>提交</Button>
				</div>
			</Card>
		</div>
	)
}